<template>
    <div>
        <a-row>
            <a-col span="15">
                <a-form :form="form" @submit="change">
                    <a-row>
                        <a-form-item>
                            <a-col span="5" offset="1">
                                <a-form-item label="通用预存款充值设置"  style="float:left;"/>
                            </a-col>
                            <a-col span="17" offset="1">
                                <a-form-item style="float:left;">
                                    <a-radio-group v-decorator="['recharge', {
                                        initialValue: '按收费项目显示'
                                    }]">
                                        <a-radio value="按收费项目显示">按收费项目显示</a-radio>
                                        <a-radio value="按月份显示">按月份显示</a-radio>
                                    </a-radio-group>
                                </a-form-item>
                            </a-col>
                        </a-form-item>
                        <a-form-item>
                            <a-col span="5" offset="1">
                                <a-form-item label="历史账单优先"  style="float:left;"/>
                            </a-col>
                            <a-col span="17" offset="1">
                                <a-form-item :extra="message" style="float:left;">
                                    <a-switch v-model="his_check">
                                    </a-switch>
                                </a-form-item>
                            </a-col>
                        </a-form-item>
                        <a-form-item>
                            <a-col offset="7" span="24">
                                <a-button type="primary" html-type="submit">保存</a-button>
                                <a-button style="margin-left: 16px" @click="goBack">返回</a-button>
                            </a-col>
                        </a-form-item>
                    </a-row>
                </a-form>
            </a-col>
        </a-row>
    </div>
</template>

<script>
import { setBilling, getBilling } from '@/api/cashier'
import { mapGetters } from 'vuex'
const radioOptions = [
    {label: '按收费项目显示', value: 'project'},
    {label: '按月份显示', value: 'month'},
]
export default {
    name: 'charge_toll_tollSet',
    data() {
        return {
            radioOptions,
            selectRadio: 'diy',
            message: '开启后住户需优先缴清历史账单后才能缴纳最新账单',
            his_check: false,
            form: this.$form.createForm(this)
        }
    },
    mounted() {
        this.getSet()
    },
    methods: {
         ...mapGetters(['token', 'pmsArId', 'nowMg']),
        radioChange(e) {
            // this.selectRadio = e.target.value
        },
        getSet() {
            getBilling({token:this.token()}).then(res => {
                this.his_check = Boolean(res.data.his_check)
                this.form.setFieldsValue({
                    recharge: res.data.recharge
                })
            }).catch(err => {
                console.log(err)
            })
        },
        change(e) {
            e.preventDefault();
            this.form.validateFields((err, values) => {
                values.his_check = this.his_check
                setBilling(Object.assign(values,{token:this.token()})).then(res => {
                    this.$message.success(res.msg)
                }).catch(err => {
                    console.log(err)
                })
            })
        },
        goBack() {
            this.$router.go(-1)
        }
    }
}
</script>

<style scoped>
    .ant-form-item {
        margin-bottom: 10px;
    }
</style>